<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图书修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui-admin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layui-admin/css/font_eolqem241z66flxr.css" media="all"/>
    <style type="text/css">
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

    <script src="/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body class="childrenBody">
<form class="layui-form" id="book_form">
    <p id="book_id"></p>
    <div class="layui-form-item">
        <label class="layui-form-label">书籍编号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input newsName" disabled="disabled" lay-verify="required" placeholder="请输入书名" name="bookId"
                   id="bookId">
        </div>
        <label class="layui-form-label">书籍名称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input newsName" lay-verify="required" placeholder="请输入书名" name="bookName"
                   id="bookName">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">书籍作者</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input newsAuthor" lay-verify="required" placeholder="请输入作者"
                       name="bookAuthor" id="bookAuthor">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <select id="parent_type" lay-filter="parent_type">
                <option value="-1">请选择类别</option>
                <option value="1">小说</option>
                <option value="2">经济管理</option>
                <option value="3">IT/计算机</option>
                <option value="4">文学</option>
                <option value="5">教育资料</option>
                <option value="6">生活休闲</option>
            </select>
        </div>
        <div class="layui-input-block">
            <select lay-verify="required" id="typeId">
                <option value="-1">请选择具体的类别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">书籍介绍</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" id="book_include" name="book_include"></textarea>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片上传</label><a class="file">选择文件
        <input type="file" name="bookImg" id="bookImg" onchange="onchange1()">
    </a>
        <span id="showFileName2" style="width: 50%"></span>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">书籍上传</label><a class="file">选择文件
        <input type="file" name="book_file" id="book_file" onchange="onchange2()"></a>
        <span id="showFileName1" style="width: 50%"></span>

    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" lay-submit="" lay-filter="addBook" value="提交">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="/layui-admin/layui/layui.js"></script>
<script type="text/javascript">
    $("#preview").click(function(){
        var index = layui.layer.open({
            area:['400px','300px'],
            resize :true,
            title:false,
            type : 1,
            scrollbar:false,
            content : '<img src='+$("#showFileName2").text()+'>',
            success : function(layero, index){

            }
        })
        //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）

    });
    layui.config({
        base : "js/"
    }).use(['form','layer','jquery','layedit','laydate'],function(){
        var form = layui.form(),
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            laypage = layui.laypage,
            layedit = layui.layedit,
            laydate = layui.laydate,
            $ = layui.jquery;

        //重新渲染表单
        function renderForm(){
            layui.use('form', function(){
                var form = layui.form();//高版本建议把括号去掉，有的低版本，需要加()
                form.render();
            });
        }
        form.on('select(parent_type)', function(data){
            if(data.value=='-1'){
                $("#typeId option").remove();
                $("#typeId").append("<option value='-1'>请选择具体的类别</option>");
                renderForm();//表单重新渲染，要不然添加完显示不出来新的option
                layer.close(0);
            }
            $.get("/get_category?Pid="+data.value, function(result){
                var data = eval(result);
                $("#typeId option").remove();
                $.each(data.obj, function(index,values){
                    $("#typeId").append("<option value='"+values.cId+"'>"+values.cName+"</option>");
                    renderForm();//表单重新渲染，要不然添加完显示不出来新的option
                    layer.close(0);
                })
            });
        });
        form.on('submit(addBook)', function (data) {
            var book = new FormData();
            book.append("typeId", $("#typeId").val());
            if($('#bookImg')[0].files[0]==null){
                book.append("bookImg",  $("#showFileName2").text());
            }else{
                book.append("bookImg", $('#bookImg')[0].files[0]);
            }
            book.append("bookName", $("#bookName").val());
            book.append("bookAuthor", $("#bookAuthor").val());
            book.append("bookDetails", $("#book_include").val());
            if ($('#book_file')[0].files[0]==null){
                book.append("book_file",  $("#showFileName1").text());
            }else{
                book.append("book_file", $('#book_file')[0].files[0]);
            }
            book.append("book_id",$("#bookId").val());
            $.ajax({
                url: "http://localhost:8080/update_book",
                data: book,
                type: "post",
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                success: function (res) {
                    layer.msg("数据添加成功");
                    layer.closeAll("iframe");
                    //刷新父页面
                    parent.location.reload();
                },
                error: function () {
                    layer.msg("网络发生错误了")
                },
                beforeSend:function(){
                    //弹出loading
                    var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
                    setTimeout(function(){
                        top.layer.close(index);
                    },2000);
                }
            });
            return false;//只此一句
        });

    });

    function onchange1() {
        var filePath = $("#bookImg").val();
        if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1];
            $("#showFileName2").text(fileName);
        } else {
            $("#showFileName2").text("");
            $("#showFileName2").text("您未上传文件，或者您上传文件类型有误！只能上传jpg和png").show();
        }
    };

    function onchange2() {

        var filePath = $("#book_file").val();
        if (filePath.indexOf("pdf") != -1 || filePath.indexOf("txt") != -1) {
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1];
            $("#showFileName1").text(fileName);
        } else {
            $("#showFileName1").text("");
            $("#showFileName1").text("您未上传文件，或者您上传文件类型有误！只能上传pdf或者txt").show();
        }
    };
</script>
</body>
</html>